<!-- eslint-disable vue/no-mutating-props -->
<template>
  <div>
    <el-dialog title="商品添加" :visible.sync="isShow" center>
      <el-form :model='goodsAdd' ref="commgRef">
        <el-form-item label="一级分类" :label-width="formLabelWidth" prop='first_cateid'>

          <el-select placeholder="请选择" v-model="goodsAdd.first_cateid"  @change="changeCate" >

            <el-option
              v-for="item in cateList"
              :label="item.catename"
              :value="item.id"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级分类" :label-width="formLabelWidth">
          <el-select placeholder="请选择活动区域" v-model="goodsAdd.second_cateid">
            <el-option  v-for="item in cateArr"
              :label="item.catename"
              :value="item.id"
              :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品名称" :label-width="formLabelWidth">
          <el-input v-model="goodsAdd.goodsname"></el-input>
        </el-form-item>
        <el-form-item label="价格" :label-width="formLabelWidth">
          <el-input v-model="goodsAdd.price"></el-input>
        </el-form-item>
        <el-form-item label="市场价格" :label-width="formLabelWidth">
          <el-input v-model="goodsAdd.market_price"></el-input>
        </el-form-item>
        <el-form-item label="图片上传" :label-width="formLabelWidth">
          <!-- on-preview 点击文件列表中已上传的文件时的钩子 -->
          <el-upload
              :limit="1"
            :on-preview="onPreview"
            action="#"
            :file-list="fileList"
            list-type="picture-card"
            :on-change="changeInfo"
            :auto-upload="false"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog visible.sync="dialogVisible" :append-to-body="true">
            <img width="100%"  :src='dialogImageUrl'  alt="" />
          </el-dialog>
        </el-form-item>

        <el-form-item label="商品规格" :label-width="formLabelWidth">
  <el-select placeholder="请选择商品规格" v-model="goodsAdd.specsid" @change="changeSpace">
            <el-option  v-for="item in spaceList"
              :label="item.specsname"
              :value="item.id"
              :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="规格属性" :label-width="formLabelWidth" >
          <el-select placeholder="请选择" v-model="goodsAdd.specsattr" :multiple='true'>
           <el-option  v-for="item in spaceArr"
              :label="item"
              :value="item"
              :key="item"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="是否新品" :label-width="formLabelWidth">
          <el-radio v-model="goodsAdd.isnew" :label="1">是</el-radio>
          <el-radio v-model="goodsAdd.isnew" :label="2">否</el-radio>
        </el-form-item>

        <el-form-item label="是否热卖" :label-width="formLabelWidth">
          <el-radio v-model="goodsAdd.ishot" :label="1">是</el-radio>
          <el-radio v-model="goodsAdd.ishot" :label="2">否</el-radio>
        </el-form-item>

      <el-form-item label="状态" :label-width="formLabelWidth">

  <el-switch
    v-model="goodsAdd.status"
    active-color="#13ce66"
    inactive-color="#ff4949"
    :active-value="1"
    :inactive-value="2">
  </el-switch>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button>取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { specslist, goodsadd } from '../../../api/api'
import { mapActions, mapGetters } from 'vuex'
export default {
  props: ['isShow', 'isAdd'],
  data () {
    return {
      formLabelWidth: '120px',
      rules: {
        price: [
          { required: true, message: '请输入商品规格名称', trigger: 'blur' },
          {
            min: 2,
            max: 15,
            message: '长度在 2 到 15 个字符',
            trigger: 'blur'
          }
        ]
      },
      goodsAdd: {
        first_cateid: '', // 一级分类编号
        second_cateid: '', // 二级分类编号
        goodsname: '', // 商品名称
        price: '', // 商品价格
        market_price: '', // 市场价格
        img: '', // 商品图片
        description: '', // 商品描述
        specsid: '', // 商品规格编号
        specsattr: '', // 商品规格属性
        isnew: 1, // 1是 2否  新品
        ishot: 1, // 1是 2否  是否热卖
        status: 1
      },
      radio: '1',
      cateArr: [], // 二级分类筛选数组
      spaceList: [], // 商品规格
      spaceArr: [], // 商品 属性
      dialogVisible: false,
      dialogImageUrl: '',
      fileList: []
    }
  },
  created () {
    this.getCateList()
    specslist().then(res => {
      this.spaceList = res.list
    })
  },
  methods: {
    ...mapActions({
      getCateList: 'classify/getCatelist'
    }),
    changeCate (id) {
      // 同过双向数据绑定获取到 id 值 来查找二级分类
      const index = this.cateList.findIndex(item => {
        return item.id === id
      })
      this.cateArr = this.cateList[index].children
      //  每次选取一级分类 清空2级分类
      this.goodsAdd.second_cateid = ''
    },
    changeSpace (id) {
      console.log(id)
      const index = this.spaceList.findIndex(item => {
        return item.id === id
      })
      this.spaceArr = this.spaceList[index].attrs
      //  每次选取一级分类 清空2级分类
      this.goodsAdd.specsattr = ''
    },
    onPreview (file) {
      // 打开预览框
      this.dialogVisible = true
      // 给弹框赋值图片地址
      this.dialogImageUrl = file.url
    },
    changeInfo () {

    },
    confirm () {
      this.$refs.commgRef.validate((val) => {
        if (val) {
          this.goodsAdd.specsattr = this.goodsAdd.specsattr.join(',')

          if (this.isAdd) {
            goodsadd(this.goodsAdd).then(res => {
              console.log(res)
              if (res.code === 200) {
                this.$message.success(res.msg)
                // this.cancel()
                // this.getSpecs()
                // this.getCount()
              }
            })
          }
          // else {
          //   specsedit(this.specsInfo).then((res) => {
          //     if (res.code === 200) {
          //       this.$message.success(res.msg)
          //       this.cancel()
          //     } else {
          //       this.$message.error(res.msg)
          //     }
          //   })
          // }
        } else {
          this.$message.error('验证失败')
        }
      })
    }
  },
  computed: {
    ...mapGetters({
      cateList: 'classify/getcatelist'
    })
  }
}
</script>

<style>
</style>
